<template>
  <Teleport to="body">
    <div class="dialog" v-if="visibleVariable">
      <div class="dialog__box" :style="{height: height+'px', width: width+'px'}">
        <div class="dialog__header">
          <div class="dialog__title">{{ title }}</div>

          <el-icon class="dialog__close" @click="clickCloseDialog">
            <Close/>
          </el-icon>
        </div>

        <div class="dialog__body">
          <ArkScroll>
            <slot></slot>
          </ArkScroll>
        </div>

        <div v-if="showMasking" class="dialog__masking"></div>
      </div>
    </div>
  </Teleport>
</template>

<script>
import {defineComponent} from 'vue';
import ArkScroll from '@/components/base-component-v1/ark-scroll/ArkScroll.vue';

export default defineComponent({
  name: 'AppDialog',
  components: {ArkScroll},
  emits: ['update:visible'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    beforeClose: {
      type: Function,
    },
    width: {
      type: [Number, String],
      default: 726,
      validate: (value) => {
        return !Number.isNaN(Number(value));
      }
    },
    height: {
      type: [Number, String],
      default: 376,
      validate: (value) => {
        return !Number.isNaN(Number(value));
      }
    },
    title: {
      type: String,
    },
    showMasking: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visibleVariable: false
    };
  },
  watch: {
    visible(newVal) {
      this.visibleVariable = newVal;
    },
    visibleVariable(newVal) {
      this.$emit('update:visible', newVal);
    }
  },
  created() {
    this.visibleVariable = this.visible;
  },
  methods: {
    clickCloseDialog() {
      if (typeof this.beforeClose === 'function') {
        Promise.resolve(this.beforeClose()).then((res) => {
          if (res === false) return;

          this.visibleVariable = false;
        });
        return;
      }
      this.visibleVariable = false;
    },
  }
});
</script>

<style scoped>
.dialog {
  @apply text-[#E8E8E8] flex justify-center items-center;
  @apply fixed top-0 bottom-0 left-0 right-0 z-50;
  background: linear-gradient(271deg, #141B2A 0%, rgba(20, 27, 42, 0.56) 75%, rgba(20, 27, 42, 0) 100%),
  linear-gradient(271deg, rgba(20, 27, 42, 0) 0%, rgba(20, 27, 42, 0.56) 25%, #141B2A 100%),
  linear-gradient(180deg, rgba(20, 27, 42, 0) 0%, rgba(20, 27, 42, 0.56) 50%, #141B2A 100%);

  .dialog__box {
    @apply relative;
    background: rgba(25, 30, 42, 0.84);

    .dialog__header {
      @apply h-10 pl-4 pr-[18px] text-xl flex justify-between items-center;
      background: url("dialog-header.svg") no-repeat;

      .dialog__title {
        @apply text-white;
      }

      .dialog__close {
        @apply text-[#FFFFFF7F] hover:text-[#FFFFFFFF] cursor-pointer;
      }
    }

    .dialog__body {
      @apply m-6;
      height: calc(100% - 64px);
    }

    .dialog__masking {
      @apply absolute bottom-[-9px] left-0 right-0 h-[76px];
      background: url("dialog-bottom.svg");
    }
  }
}
</style>